<template>
  <div>
    <div>
      <el-select v-model="year" @change="change">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" @change="change">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar v-model="value">
      <template #dateCell="{ date }">
        {{ getDay(date) }}
        <span v-if="isWeek(date)" class="spanBox">休</span>
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  name: 'Calendar',
  data() {
    return {
      value: new Date(),
      options: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    }
  },
  computed: {},
  created() {
    /* 需求: 以2022为中心点,前后各推5年 */
    // console.log([...Array(11)], 9999)

    // var arr = [1, 2, 3, 4, 5, 2, 3]
    // console.log([...new Set(arr)], 9)
    // console.log(Array.from(new Set(arr)), 99)

    var arr = Array.from(Array(11))
    arr.forEach((item, index) => {
      arr[index] = 2022 + index - 5
      item = 2022 + index - 5
      // console.log(item, 111)
    })
    console.log(arr, 999)
    this.options = arr
  },
  methods: {
    getDay(time) {
      // console.log(time)
      var t = new Date(time)
      var day = t.getDate()
      return day
    },
    isWeek(time) {
      var t = new Date(time)
      var week = t.getDay()
      // console.log(week, 111)
      if (week == 0 || week == 6) {
        return true
      } else {
        return false
      }
    },
    change() {
      this.value = new Date(`${this.year}-${this.month}`)
    }
  }
}
</script>
<style lang="scss" scoped>
// scss ===::v-deep
::v-deep .el-calendar_header {
  display: none;
}

// less === /deep/  穿透
// /deep/ .el-calendar_header {
//   display: none;
// }
.spanBox {
  color: #fff;
  background-color: red;
  border-radius: 50%;
  padding: 2px;
}
</style>
